<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="auto"
					class="flex-warp-container"
				>
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
							:merchantInfo.sync="merchantObj"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.issue_time'
							)}:`
						"
						class="flex-row-container"
						label-width="77px"
					>
						<!-- <el-select
							v-model="timeFlag"
							:placeholder="$t('common.please_choose')"
							style="width:140px"
						>
							<el-option
								:label="
									$t(
										'funds.proxy_member_funds_record.issue_time'
									)
								"
								value="0"
							></el-option>
							<el-option
								:label="
									$t(
										'funds.proxy_member_funds_record.draw_time'
									)
								"
								value="1"
							></el-option>
						</el-select> -->
						<el-date-picker
							v-model="searchTime"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							:clearable="false"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item class="flex-row-container">
						<el-input
							v-model="queryData.inputValue"
							class="input-with-select"
							:placeholder="$t('common.please_enter')"
							clearable
							size="medium"
							v-input="{ name: 'num_alp' }"
						>
							<el-select
								slot="prepend"
								v-model="queryData.inputType"
								:placeholder="$t('common.please_choose')"
								style="width:110px"
							>
								<el-option
									:label="$t('funds.user_name')"
									:value="1"
								></el-option>
								<el-option
									:label="$t('funds.order_no')"
									:value="2"
								></el-option>
							</el-select>
						</el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.thirdPeymentChannelConfig.payment_merchant_name'
							)}:`
						"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.payMerchantName"
							clearable
							size="medium"
							v-input="{ name: 'noEmpty' }"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.channel_name')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.channelName"
							clearable
							size="medium"
							v-input="{ name: 'noEmpty' }"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.pay_type')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.payType"
							:popper-append-to-body="false"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option
								v-for="item in payTypeList"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item
						:label="`${$t('funds.proxy_member_funds_record.pay_type')}:`"
					>
						<el-select
							v-model="queryData.payType"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in paymentChannelType"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item> -->
					<!-- <el-form-item
						:label="
							`${$t('funds.proxy_member_funds_record.status')}:`
						"
					>
						<el-select
							v-model="queryData.status"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in rebateType"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				class="content"
			>
				<el-table
					border
					size="mini"
					show-summary
					:data="tableData"
					style="width: 100%"
					class="small-size-table"
					:max-height="tableH"
					highlight-current-row
					:header-cell-style="getRowClass"
					:summary-method="(val) => handleRow(val, summary)"
				>
					<el-table-column
						prop="eventId"
						align="center"
						min-width="260px"
						:label="`${$t('funds.order_no')}`"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.eventId || '-' }}
						</template>
					</el-table-column>
					<!-- <el-table-column
						prop="thirdOrderNo"
						align="center"
						min-width="260"
						:label="$t('funds.fund_audit.connect_three_order_no')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy
								v-if="!!scope.row.thirdOrderNo"
								:title="scope.row.thirdOrderNo"
								:copy="copy"
							>
								{{ scope.row.thirdOrderNo }}
							</Copy>
							<span v-else>-</span>
						</template>
					</el-table-column> -->
					<el-table-column
						prop="userName"
						align="center"
						:label="`${$t('funds.user_name')}`"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.userName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						:label="$t('common.belong_merchant')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.merchantName || '-' }}
						</template>
					</el-table-column>
					<!-- <el-table-column
						prop="vipLevel"
						align="center"
						:label="`${$t('funds.vip_level')}`"
					>
						<template slot-scope="scope">
							VIP{{ scope.row.vipLevel }}
						</template>
					</el-table-column> -->
					<el-table-column
						prop="paymentMerchantName"
						align="center"
						:label="
							$t(
								'funds.thirdPeymentChannelConfig.payment_merchant_name'
							)
						"
						min-width="130"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.payMerchantName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="channelName"
						align="center"
						:label="$t('funds.channel_name')"
						min-width="130"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.channelName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="payType"
						align="center"
						:label="$t('funds.pay_type')"
						min-width="130"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.payTypeStr || '-' }}
						</template>
					</el-table-column>
					<!-- <el-table-column
						prop="payTypeStr"
						align="center"
						:label="`${$t('funds.proxy_member_funds_record.pay_type')}`"
					></el-table-column> -->
					<el-table-column
						prop="discountRate"
						align="center"
						:label="
							`${$t(
								'funds.proxy_member_funds_record.discount_rate'
							)}`
						"
						min-width="200"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ handlePercentage(scope.row.discountRate) }}
						</template>
					</el-table-column>
					<el-table-column
						prop="bonusAmount"
						align="center"
						min-width="200"
						:label="`${$t('funds.bonus_amount')}`"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.bonusAmount
								)
							}}
						</template>
					</el-table-column>
					<!-- <el-table-column
						prop="statusStr"
						align="center"
						:label="
							`${$t(
								'funds.proxy_member_funds_record.draw_status'
							)}`
						"
					></el-table-column> -->
					<el-table-column
						prop="eventTime"
						align="center"
						:label="
							`${$t(
								'funds.proxy_member_funds_record.issue_time'
							)}`
						"
						min-width="200"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.eventTime || '-' }}
						</template>
					</el-table-column>
					<!-- <el-table-column
						prop="receiveTime"
						align="center"
						:label="
							`${$t('funds.proxy_member_funds_record.draw_time')}`
						"
						min-width="200"
					>
						<template slot-scope="scope">
							{{ scope.row.receiveTime || '-' }}
						</template>
					</el-table-column> -->
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
const end = dayjs().endOf('day')
const start = dayjs().startOf('day')
export default {
	name: routerNames.memberDepositpreferenceRecord,
	components: {},
	mixins: [list, summaryList],
	data() {
		return {
			queryData: { inputType: 1 },
			timeFlag: '0',
			searchTime: [start, end],
			tableData: [],
			summary: {},
			merchantObj: '',
			paymentChannelType: []
		}
	},
	computed: {
		payTypeList() {
			return this.globalDics.depositPaymentType || []
		},
		rebateType() {
			return this.globalDics.rebateType || []
		}
	},
	watch: {
		timeFlag: {
			handler(newVal) {
				this.tableData = []
				this.total = 0
			}
		}
	},
	created() {
		this.getPaymentChannelTypeChange()
	},
	methods: {
		loadData() {
			this.loading = true
			const timeArr = this.searchTime || []
			const params = {
				...this.getParams(),
				...this.queryData,
				eventTimeStart:
					this.timeFlag === '0'
						? dayjs(timeArr[0]).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
				eventTimeEnd:
					this.timeFlag === '0'
						? dayjs(timeArr[1]).format('YYYY-MM-DD HH:mm:ss')
						: undefined
				// receiveTimeStart:
				// 	this.timeFlag === '1'
				// 		? dayjs(timeArr[0]).format('YYYY-MM-DD HH:mm:ss')
				// 		: undefined,
				// receiveTimeEnd:
				// 	this.timeFlag === '1'
				// 		? dayjs(timeArr[1]).format('YYYY-MM-DD HH:mm:ss')
				// 		: undefined
			}
			if (params.inputType === 1) {
				params.userName = params.inputValue || undefined
				params.eventId = undefined
			} else if (params.inputType === 2) {
				params.userName = undefined
				params.eventId = params.inputValue || undefined
			}
			delete params.inputValue
			delete params.inputType
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getMemberDepositDiscountRecordList(params)
				.then((res) => {
					this.loading = false
					const { record, totalRecord, summary } = res.data || {}
					this.tableData = record || []
					this.total = totalRecord || 0
					this.summary = summary || {}
				})
				.catch(() => {
					this.loading = false
				})
		},
		getPaymentChannelTypeChange() {
			this.$api.triggerDepositChannel(0).then((res) => {
				this.paymentChannelType = res.data
			})
		},
		reset() {
			this.pageNum = 1
			this.queryData = { inputType: 1 }
			this.merchantObj = ''
			this.timeFlag = '0'
			this.searchTime = [start, end]
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
